<template>
	<view class="activate-success-box">
		<view class="active-bg">
			<view class="adv-box">


				<view class="adv-box-header flex flai">
					<text>蜜袋互助</text>
					<text>等待期</text>
				</view>
				<view class="important">{{orderTitle}}</view>
				<view class="number">
					编号 {{orderNum}}
				</view>
			</view>
		</view>
		<view class="page-section-spacing">
			<swiper class="swiper" current="current" @change='changeSwipter' :indicator-dots="indicatorDots" :indicator-color="indicatorColor"
			 :indicator-active-color="indicatorActiveColor">
				<swiper-item v-for="(item,index) in banners" :key="item.id">
					<view class="swiper-item">
						<view class="section-box">


							<view class="section flex">
								<view class="section-title main-title">会员</view>
								<view class="section-con main-title flex1">{{item.person.name}}</view>
							</view>
							<view class="section flex">
								<view class="section-title">身份证号</view>
								<view class="section-con flex1">{{item.icCard}}</view>
							</view>
							<view class="section flex">
								<view class="section-title">最高保障</view>
								<view class="section-con flex1 flex">{{item.plan.insuredAmount}}万 <navigator url="" class="green ml20">升级保障 ></navigator>
								</view>
							</view>
							<view class="section flex" @click="member(item.order.id)">
								<view class="section-title">会员编号</view>
								<view class="section-con flex1 flex">
									<navigator url="" class="green">{{item.person.memberNo}} ></navigator>
								</view>
							</view>
							<view class="section flex">
								<view class="section-title">蚂蚁区块链</view>
								<view class="section-con flex1 flex" @click="toggle(index)">
									<view  class="green">该凭证已上链 ></view>
								</view>
							</view>
							 <transition name="fade">
							<view class="section flex" v-if="item.isShow">
								<view class="section-title">上链hash</view>
								<view class="section-con flex1" @click="copy(item.order.linkCode)" style=" word-break: break-all;word-wrap: break-word;">
								{{item.order.linkCode}}
									
								</view>
							</view>
							 </transition>
							<view class="section">
								<view class="section-head flex fljcsb">
									<text>{{item.order.waitDays}}天等待期开始</text>
									<text>权益生效</text>
								</view>
								<view class="section-process-box flex flai">

									<view class="process-crcle-active">

									</view>
									<view class="process-bg">

									</view>
									<view class="process-bg process-bg-active" :style="item.width">

									</view>
									<view class="process-crcle">

									</view>
								</view>
								<view class="section-head flex fljcsb">
									<text style="color: #333333;">{{item.order.activeDate}}</text>
									<text style="color: #999;">{{item.order.effectiveDate}}</text>
								</view>
							</view>
							<view class="section flex" @click="assestSn(item.station.captitalId)">
								<view class="section-title">资产编号</view>
								<view class="section-con flex1 flex">
									<navigator url="" class="green">{{item.station.capitalSn}} ></navigator>
								</view>
							</view>
							<view class="section flex">
								<view class="section-title">电站位置</view>
								<view class="section-con flex1 flex">{{item.station.area}}</view>
							</view>
							<view class="section flex">
								<view class="section-title">项目名称</view>
								<view class="section-con flex1 flex">{{item.station.name}} </view>
							</view>
							<view class="section flex">
								<view class="section-title">上网电价</view>
								<view class="section-con flex1 flex">{{item.station.onNetPrice}}元/kwh</view>
							</view>
							<view class="section flex">
								<view class="section-title">电站预计发电量</view>
								<view class="section-con flex1 flex">{{item.station.predictYearQuantity}}kwh</view>
							</view>
						</view>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="add-home" @click="addHome">添加家人</view>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	import h5Copy from '../../static/junyi-h5-copy.js'
	export default {
		data() {
			return {
				indicatorDots: true,
				indicatorColor: '#ccc',
				indicatorActiveColor: '#66BF00',
				banners:[],
				orderTitle: '',
				orderNum: '',
				backPageDirection:false
			}
		},
		onLoad(opt) {
			console.log()
			var arrs = JSON.parse(opt.id);
			for (var i = 0; i < arrs.length; i++) {
				arrs[i] = 'id=' + arrs[i]
			}
			let ids = arrs.join('&')
			this.activateSuccessDetail(ids)
			this.getList()
			this.addEventBack()
		},
		methods: {
			// 复制功能
			copy (data){
				       const result = h5Copy(data)
				       if (result === true) {
				         uni.showToast({
				           title:'复制成功',
				         })
				       } else {
				         uni.showToast({
				           title:'复制失败',
				           icon:'none'
				         })
				       }
			},
			// 展开收缩
			toggle(index) {
				this.banners[index]['isShow'] = !this.banners[index]['isShow']
			},
			// 点击会员编号
			member(id){
				uni.navigateTo({
				    url: `/pages/myMutualHelp/safeguardDetail?type=1&orderId=${id}`
				})
			},
			// 点击资产编号
			assestSn(id){
				uni.navigateTo({
				    url: `/pages/myMutualHelp/safeguardDetail?type=2&orderId=${id}`
				})
			},
			// 监听用户操作返回虚拟键盘事件
			addEventBack(){
				  	pushHistory(); 
				  	window.addEventListener("popstate",this.addBackKey, false); 
				   	function pushHistory() { 
				       	var state = { 
				          	 title: "title", 
				          	 url: "#"
				       	}; 
				       window.history.pushState(state, "title", ""); 
				  	 }
				},
				// 用户操作返回按钮后所要做的事情
				addBackKey(){
					if (this.backPageDirection) {
						uni.switchTab({
							url:'/pages/myMutualHelp/index'
						})
					} else {
						uni.navigateBack({
							delta:1
						})
					}
					},
			// 获取未激活保障人信息
			getList(id) {
					// var opt = {
					// 	orderId:id
					// }
				
				api.joinHellp.getBeneficiaryList().then(res => {
					if (res.code == 1 && res.data.length>0) {
						
						var list = res.data[0].orderList
						if (list.length>0){
							this.backPageDirection = false
						}  else {
							this.backPageDirection = true
						}
					}
				})
			},
			// 激活成功详情
			activateSuccessDetail(id) {
				api.joinHellp.activateSuccessDetail(id).then(res => {
					if (res.code == 1) {
						var list = res.data
						for (var k in list) {
							var w = 90 / list[k].order.waitDays * this.getDaysBetween(list[k].order.effectiveDate, res.time)
							list[k]['width'] = 'width:' + w + '%'
							list[k]['isShow'] = false
							if (list[k].person.cardid && list[k].person.cardid!='') {
								list[k]['icCard'] = list[k].person.cardid.replace(/^(.{6})(?:\w+)(.{4})$/, "$1****$2")
							} else {
								list[k]['icCard'] =''
							}
							
						}
						this.banners = list
						this.orderTitle = list[0].plan.name
						this.orderNum = list[0].plan.sn
					}
				})
			},
			// 对日期进行处理
			getDaysBetween(startDate, currentDate) {
				var startDates = new Date(startDate).getTime()
				var currentDates = new Date(currentDate).getTime()
				var res = (currentDates - startDates) / (1 * 24 * 60 * 60 * 1000)
				return res
			},
			// 返回加入互助
			addHome() {
				uni.switchTab({
					url: '/pages/joinPage/joinPage'
				});
			},
			// 当 swiper 滑动的时候 对 标题和 编码进行赋值
			changeSwipter(event) {
				var index = event.detail.current
				this.orderTitle = this.banners[index].plan.name
				this.orderNum = this.banners[index].order.sn
			}
		}
	}
</script>

<style>
	@import "../../static/css/common.css";
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
  }
	.active-bg {
		width: 100%;
		height: 420rpx;
		background: url(../../static/image/pic5.png);
		background-size: cover;
	}

	swiper {
		height: 809rpx;
		width: 709rpx;
		margin: 0 auto;
	}

	.swiper-item {
		background: url(../../static/image/pic4.png);
		height: 809rpx;
		width: 709rpx;
		background-size: 100% 100%;

	}

	.page-section-spacing {
		margin-top: 20rpx;
		margin-bottom: 120rpx;
	}

	.add-home {
		width: 590rpx;
		height: 118rpx;
		background: linear-gradient(0deg, rgba(101, 189, 0, 1), rgba(161, 244, 0, 1));
		border-radius: 60rpx;
		background-size: cover;
		margin-top: 40rpx;
		margin-left: 80rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 118rpx;
		margin-bottom: 180rpx;
	}

	.add-home:active {
		opacity: 0.7;
	}

	.main-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(17, 17, 17, 1);
	}

	.section {
		margin-bottom: 20rpx;
	}

	.section-box {
		padding: 40rpx 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.section-title {
		width: 240rpx;

	}

	.green {
		color: #66BE00;

	}

	.ml20 {
		margin-left: 20rpx;
	}

	.section-head {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(17, 17, 17, 1);
	}

	.process-crcle {
		width: 20rpx;
		height: 20rpx;
		border: 6rpx solid #66BE00;
		border-radius: 50%;
		opacity: 0.3;
	}

	.process-crcle-active {
		width: 20rpx;
		height: 20rpx;
		border: 6rpx solid #66BE00;
		border-radius: 50%;
	}

	.process-bg {
		width: 541rpx;
		height: 6rpx;
		background: #66BE00;
		opacity: 0.3;
	}

	.section-process-box {
		position: relative;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.process-bg-active {
		position: absolute;
		top: 14rpx;
		left: 28rpx;
		background: #66BE00;
		opacity: 1;
		max-width: 90%;

	}

	.adv-box {
		position: relative;
		top: 130rpx;

	}

	.adv-box-header {
		margin-bottom: 40rpx;
	}

	.adv-box-header text:nth-child(1) {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(255, 255, 255, 1);
		margin-left: 120rpx;
	}

	.adv-box-header text:nth-child(2) {
		background: rgba(255, 255, 255, 1);
		border-radius: 12rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 190, 0, 1);
		padding: 4rpx 10rpx;
		margin-left: 10rpx;
	}

	.important {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.number {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin-top: 10rpx;
	}
</style>
